import React, { Component } from 'react'
import '../assets/styles/homePage.less'
import Header from '../components/Header'
import Banner from '../components/Banner'
import Subject from '../components/Subject'
import { Flex, Tabs, List } from 'antd-mobile'
import Img from '../components/Img'
import SubListItem from '../components/SubListItem'

import '../assets/fonts/iconfont.css'

const Item = List.Item

const tabs = [{ title: '产品' }, { title: '出行' }, { title: '动态' }]

const sub_list_data = [
  {
    img: 't0110974b6f051c1e5a.gif',
    title: '用于构建用户界面的 JavaScript 库',
    des:
      '组件逻辑使用 JavaScript 编写而非模版，你可以轻松地在应用中传递数据，并使得状态与 DOM 分离',
  },
  {
    img: 't0177ec8627c04e438b.gif',
    title: '渐进式的JavaScript 框架',
    des: '不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩',
  },
  {
    img: 't0135a6567622271196.gif',
    title: '一套框架多种平台 移动端&桌面端',
    des: '学会用 Angular 构建应用，把这些代码和能力复用在多种不同平台的应用上',
  },
  {
    img: 't0110974b6f051c1e5a.gif',
    title: '用于构建用户界面的 JavaScript 库',
    des:
      '组件逻辑使用 JavaScript 编写而非模版，你可以轻松地在应用中传递数据，并使得状态与 DOM 分离',
  },
  {
    img: 't0177ec8627c04e438b.gif',
    title: '渐进式的JavaScript 框架',
    des: '不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩',
  },
]

class HomePage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sub_list_data,
    }
  }

  render() {
    return (
      <div className="home-page">
        {/* 头部区域 */}
        <Header />
        {/* 轮播图区域 */}
        <Banner />
        {/* 学科导航 */}
        <Subject />

        {/* 小列表 */}
        <div className="sub-list">
          <div className="sub-list-header">相关资讯</div>
          {this.state.sub_list_data.map((item, index) => {
            return (
              <div key={index}>
                <SubListItem obj={item} />
              </div>
            )
          })}
        </div>

        {/* tab区域 */}

        <div className="tab">
          <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false}>
            <div>
              <Flex className="tab-flex">
                <Flex.Item className="tab-left">
                  <Img src="20191025091907842.gif" height={79} />
                </Flex.Item>
                <Flex.Item className="tab-right">
                  <h3>计划为galaxy s11配置可卷曲显示屏和可旋转摄像头</h3>
                  <p>
                    <span>
                      <i className="iconfont icon-shijian"></i>
                      2小时前
                    </span>

                    <span style={{ float: 'right' }}>
                      <i className="iconfont icon-liulan"></i>
                      63
                    </span>
                  </p>
                </Flex.Item>
              </Flex>

              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
            </div>
          </Tabs>
        </div>

        <div className="tab">
          <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false}>
            <div>
              <Flex className="tab-flex">
                <Flex.Item className="tab-left">
                  <Img src="20191025091907842.gif" height={79} />
                </Flex.Item>
                <Flex.Item className="tab-right">
                  <h3>计划为galaxy s11配置可卷曲显示屏和可旋转摄像头</h3>
                  <p>
                    <span>
                      <i className="iconfont icon-shijian"></i>
                      2小时前
                    </span>

                    <span style={{ float: 'right' }}>
                      <i className="iconfont icon-liulan"></i>
                      63
                    </span>
                  </p>
                </Flex.Item>
              </Flex>

              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
            </div>
          </Tabs>
        </div>
        <div className="tab">
          <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false}>
            <div>
              <Flex className="tab-flex">
                <Flex.Item className="tab-left">
                  <Img src="20191025091907842.gif" height={79} />
                </Flex.Item>
                <Flex.Item className="tab-right">
                  <h3>计划为galaxy s11配置可卷曲显示屏和可旋转摄像头</h3>
                  <p>
                    <span>
                      <i className="iconfont icon-shijian"></i>
                      2小时前
                    </span>

                    <span style={{ float: 'right' }}>
                      <i className="iconfont icon-liulan"></i>
                      63
                    </span>
                  </p>
                </Flex.Item>
              </Flex>

              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
              <Item arrow="horizontal" onClick={() => {}}>
                小米有品推出小寻定位书包，拥有八重定位。。。
              </Item>
            </div>
          </Tabs>
        </div>
      </div>
    )
  }
}

export default HomePage
